import { defineStore } from "pinia";
import { computed, ref } from "vue";
import type { Ref, Reactive, ComputedRef } from "vue";
import { useMouse } from "../composible/useMouse";

export type OffsetRes = ComputedRef<{
  x: number;
  y: number;
}>;

export const useOffset = (
  position: Reactive<{ x: number; y: number }>,
  offset: Ref<number>,
): { offsetPosition: OffsetRes } => {
  const offsetPosition = computed(() => {
    return {
      x: position.x + offset.value,
      y: position.y + offset.value,
    };
  });

  return {
    offsetPosition,
  };
};

export interface MouseState {
  offset: Ref<number>;
  mouse: Reactive<{
    x: number;
    y: number;
  }>;
  offsetPosition: OffsetRes;
  setOffset: (val: number) => void;
}

export const useMouseStore = defineStore("mouseState", (): MouseState => {
  const offset = ref(0);
  const { mouse } = useMouse();

  const { offsetPosition } = useOffset(mouse, offset);

  const setOffset = (val: number) => {
    offset.value = val;
  };

  return {
    offset,
    mouse,
    offsetPosition,
    setOffset,
  };
});
